<template>
	<div>
		<van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="() => { $router.back() }" />
		<!-- tab 标签栏 渲染  ( @change 点击事件 根据下标显示不同的内容 )-->
		<van-tabs v-model:active="active" @change="change">
			<van-tab title="全部订单"></van-tab>
			<van-tab title="待付款"></van-tab>
			<van-tab title="待收货"></van-tab>
		</van-tabs>
		<!-- cell 单元格 渲染-->
		<van-cell-group v-for="item in fetchdata" style="border: 1px solid #ccc; margin: 10px; background-color: #aaa;">
			<van-cell title="订单账号" :value="item.orderId" />
			<van-cell title="订单描述" :value="item.product_code" />
			<van-cell title="用户姓名" :value="item.username" />
			<van-cell title="订单价格" :value="item.totalPrice" />
			<van-cell title="订单时间" :value="item.create_time" />
			<van-cell title="订单状态" v-m :value="item.status == 1 ? '待付款' : '待收货'" />
		</van-cell-group>
	</div>
</template>
<script setup>
import { ref } from 'vue';
let username = localStorage.getItem('username')
import { OrderListApi } from '@/api/api';
// 定义渲染数据
let orderdata = ref([])
// 定义分页数据
let fetchdata = ref([])
OrderListApi(username).then(res => {
	console.log('订单详情', res);
	orderdata.value = res.data.data
	fetchdata.value = res.data.data
})
// 点击tab栏 根据 status 值 显示不同数据 
const change = (index) => {
	// status == 0 全部
	if (index == 0) {
		fetchdata.value = orderdata.value
	}
	// status == 1 待付款
	if (index == 1) {
		fetchdata.value = orderdata.value.filter(item => item.status == 1)
	}
	// status == 2 待收获
	if (index == 2) {
		fetchdata.value = orderdata.value.filter(item => item.status == 2)
	}
}
</script>

<style lang="scss" scoped></style>